<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h1>待办事项管理系统</h1>
        <p>高效管理您的时间，从这里开始</p>
      </div>
      
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        @submit.prevent="handleLogin"
      >
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            placeholder="请输入手机号"
            prefix-icon="Phone"
            size="large"
            maxlength="11"
          />
        </el-form-item>
        
        <el-form-item prop="code">
          <div class="code-input-group">
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
              prefix-icon="Message"
              size="large"
              maxlength="6"
            />
            <el-button
              :disabled="codeCountdown > 0"
              @click="sendCode"
              size="large"
              class="code-btn"
            >
              {{ codeCountdown > 0 ? `${codeCountdown}s` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            :loading="loginLoading"
            @click="handleLogin"
            class="login-btn"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      
      <div class="login-tips">
        <p>• 首次登录会自动注册账号</p>
        <p>• 验证码有效期为5分钟</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { sendSmsCode, login } from '../api/user'

export default {
  name: 'LoginView',
  emits: ['login-success'],
  setup(props, { emit }) {
    const loginFormRef = ref()
    const loginLoading = ref(false)
    const codeCountdown = ref(0)
    
    // 表单数据
    const loginForm = reactive({
      phone: '',
      code: ''
    })
    
    // 表单验证规则
    const loginRules = {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{6}$/, message: '验证码格式不正确', trigger: 'blur' }
      ]
    }
    
    // 发送验证码
    const sendCode = async () => {
      if (!loginForm.phone) {
        ElMessage.warning('请先输入手机号')
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(loginForm.phone)) {
        ElMessage.warning('手机号格式不正确')
        return
      }
      
      try {
        await sendSmsCode(loginForm.phone)
        ElMessage.success('验证码发送成功')
        
        // 开始倒计时
        codeCountdown.value = 60
        const timer = setInterval(() => {
          codeCountdown.value--
          if (codeCountdown.value <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      } catch (error) {
        console.error('发送验证码失败:', error)
        ElMessage.error('发送验证码失败')
      }
    }
    
    // 登录
    const handleLogin = async () => {
      if (!loginFormRef.value) return
      
      try {
        await loginFormRef.value.validate()
        
        loginLoading.value = true
        const response = await login(loginForm)
        
        if (response.data.code === 200) {
          // ElMessage.success('登录成功')
          emit('login-success', response.data.data)
        } else {
          ElMessage.error(response.data.message || '登录失败')
        }
      } catch (error) {
        console.error('登录失败:', error)
        if (error.response?.data?.message) {
          ElMessage.error(error.response.data.message)
        } else {
          ElMessage.error('登录失败')
        }
      } finally {
        loginLoading.value = false
      }
    }
    
    return {
      loginFormRef,
      loginForm,
      loginRules,
      loginLoading,
      codeCountdown,
      sendCode,
      handleLogin
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-header p {
  color: #666;
  font-size: 14px;
}

.code-input-group {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.code-input-group .el-input {
  flex: 1;
}

.code-btn {
  min-width: 120px;
  height: 48px;
  border-color: #409eff;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}

.login-tips {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.login-tips p {
  color: #909399;
  font-size: 12px;
  margin: 4px 0;
}

::v-deep(.el-form-item) {
  margin-bottom: 24px;
}

::v-deep(.el-input__wrapper) {
  border-radius: 8px;
  height: 48px;
}

::v-deep(.code-input-group .el-input__wrapper) {
  height: 48px;
}

::v-deep(.el-button) {
  border-radius: 8px;
}
</style> 